import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'Main',
    component: () => import('../components/Main.vue'),
    children: [{
        path: 'layout/flex-waterfalls-flow',
        name: 'flex-waterfalls-flow',
        component: () => import('../views/layout/flex-waterfalls-flow.vue')
      },
      {
        path: 'layout/colum-waterfalls-flow',
        name: 'colum-waterfalls-flow',
        component: () => import('../views/layout/colum-waterfalls-flow.vue')
      },
      {
        path: 'layout/grid-waterfalls-flow',
        name: 'grid-waterfalls-flow',
        component: () => import('../views/layout/grid-waterfalls-flow.vue')
      },
      {
        path: 'layout/multi-row-or-column',
        name: 'multi-row-or-column',
        component: () => import('../views/layout/multi-row-or-column.vue')
      },
      {
        path: 'layout/single-column-isometric',
        name: 'single-column-isometric',
        component: () => import('../views/layout/single-column-isometric.vue')
      },
      {
        path: 'layout/multi-column-contour',
        name: 'multi-column-contour',
        component: () => import('../views/layout/multi-column-contour.vue')
      },
      {
        path: 'layout/holy-grail-layout',
        name: 'holy-grail-layout',
        component: () => import('../views/layout/holy-grail-layout.vue')
      },
      {
        path: 'layout/flex-holy-grail-layout',
        name: 'flex-holy-grail-layout',
        component: () => import('../views/layout/flex-holy-grail-layout.vue')
      },
      {
        path: 'layout/double-wing-layout',
        name: 'double-wing-layout',
        component: () => import('../views/layout/double-wing-layout.vue')
      },
      {
        path: 'layout/best-way-to-center-element',
        name: 'best-way-to-center-element',
        component: () => import('../views/layout/best-way-to-center-element.vue')
      },
      {
        path: 'layout/use-margin-auto-to-simulate-space-between',
        name: 'use-margin-auto-to-simulate-space-between',
        component: () => import('../views/layout/use-margin-auto-to-simulate-space-between.vue')
      },
      {
        path: 'layout/use-margin-auto-to-simulate-align-self',
        name: 'use-margin-auto-to-simulate-align-self',
        component: () => import('../views/layout/use-margin-auto-to-simulate-align-self.vue')
      },
      {
        path: 'shadow/one-sided-shadow',
        name: 'one-sided-shadow',
        component: () => import('../views/shadow/one-sided-shadow.vue')
      },
      {
        path: 'shadow/solid-shadow',
        name: 'solid-shadow',
        component: () => import('../views/shadow/solid-shadow.vue')
      },
      {
        path: 'shadow/word-solid-shadow',
        name: 'word-solid-shadow',
        component: () => import('../views/shadow/word-solid-shadow.vue')
      },
      {
        path: 'shadow/long-shadow',
        name: 'long-shadow',
        component: () => import('../views/shadow/long-shadow.vue')
      },
      {
        path: 'shadow/word-solid-shadow-ii',
        name: 'word-solid-shadow-ii',
        component: () => import('../views/shadow/word-solid-shadow-ii.vue')
      },
      {
        path: 'shadow/opacity-wrap',
        name: 'opacity-wrap',
        component: () => import('../views/shadow/opacity-wrap.vue')
      },
      {
        path: 'shadow/shadow-ani',
        name: 'shadow-ani',
        component: () => import('../views/shadow/shadow-ani.vue')
      },
      {
        path: 'shadow/shadow-ani-ii',
        name: 'shadow-ani-ii',
        component: () => import('../views/shadow/shadow-ani-ii.vue')
      },
      {
        path: 'shadow/neon-shadow-light',
        name: 'neon-shadow-light',
        component: () => import('../views/shadow/neon-shadow-light.vue')
      },
      {
        path: 'shadow/ie-logo',
        name: 'ie-logo',
        component: () => import('../views/shadow/ie-logo.vue')
      },
      {
        path: 'shadow/douyin-logo',
        name: 'douyin-logo',
        component: () => import('../views/shadow/douyin-logo.vue')
      },
      {
        path: 'shadow/circle-loading',
        name: 'circle-loading',
        component: () => import('../views/shadow/circle-loading.vue')
      },
      {
        path: 'shadow/inscribed-angle',
        name: 'inscribed-angle',
        component: () => import('../views/shadow/inscribed-angle.vue')
      },
      {
        path: 'shadow/single-div-fork',
        name: 'single-div-fork',
        component: () => import('../views/shadow/single-div-fork.vue')
      },
      {
        path: 'pseudo/not',
        name: 'not',
        component: () => import('../views/pseudo/not.vue')
      },
      {
        path: 'pseudo/not-2',
        name: 'not-2',
        component: () => import('../views/pseudo/not-2.vue')
      },
      {
        path: 'pseudo/juejin',
        name: 'juejin',
        component: () => import('../views/pseudo/juejin.vue')
      },
      {
        path: 'pseudo/focus-within-placeholder-shown',
        name: 'focus-within-placeholder-shown',
        component: () => import('../views/pseudo/focus-within-placeholder-shown.vue')
      },
      {
        path: 'pseudo/bubble',
        name: 'bubble',
        component: () => import('../views/pseudo/bubble.vue')
      },
      {
        path: 'pseudo/focus-checked',
        name: 'focus-checked',
        component: () => import('../views/pseudo/focus-checked.vue')
      },
      {
        path: 'pseudo/focus-target',
        name: 'focus-target',
        component: () => import('../views/pseudo/focus-target.vue')
      },
      {
        path: 'pseudo/focus-within',
        name: 'focus-within',
        component: () => import('../views/pseudo/focus-within.vue')
      },
      {
        path: 'pseudo/animation-control-hover',
        name: 'animation-control-hover',
        component: () => import('../views/pseudo/animation-control-hover.vue')
      },
      {
        path: 'pseudo/animation-control',
        name: 'animation-control',
        component: () => import('../views/pseudo/animation-control.vue')
      },
      {
        path: 'pseudo/animation-control-target',
        name: 'animation-control-target',
        component: () => import('../views/pseudo/animation-control-target.vue')
      },
      {
        path: 'pseudo/boundary-judge',
        name: 'boundary-judge',
        component: () => import('../views/pseudo/boundary-judge.vue')
      },
      {
        path: 'pseudo/loading-content',
        name: 'loading-content',
        component: () => import('../views/pseudo/loading-content.vue')
      },
      {
        path: 'pseudo/loading-line',
        name: 'loading-line',
        component: () => import('../views/pseudo/loading-line.vue')
      },
      {
        path: 'filter/shadow',
        name: 'shadow',
        component: () => import('../views/filter/shadow.vue')
      },
      {
        path: 'filter/blur-constrast',
        name: 'blur-constrast',
        component: () => import('../views/filter/blur-constrast.vue')
      },
      {
        path: 'filter/fire',
        name: 'fire',
        component: () => import('../views/filter/fire.vue')
      },
      {
        path: 'filter/fire-2',
        name: 'fire-2',
        component: () => import('../views/filter/fire-2.vue')
      },
      {
        path: 'filter/mix',
        name: 'mix',
        component: () => import('../views/filter/mix.vue')
      },
      {
        path: 'filter/single-div-water-drop',
        name: 'single-div-water-drop',
        component: () => import('../views/filter/single-div-water-drop.vue')
      },
      {
        path: 'filter/ball-through',
        name: 'ball-through',
        component: () => import('../views/filter/ball-through.vue')
      },
      {
        path: 'filter/ball-loading',
        name: 'ball-loading',
        component: () => import('../views/filter/ball-loading.vue')
      },
      {
        path: 'filter/hue-rotate-color',
        name: 'hue-rotate-color',
        component: () => import('../views/filter/hue-rotate-color.vue')
      },
      {
        path: 'filter/polygon-shadow',
        name: 'polygon-shadow',
        component: () => import('../views/filter/polygon-shadow.vue')
      },
      {
        path: 'filter/ghost',
        name: 'ghost',
        component: () => import('../views/filter/ghost.vue')
      },
      {
        component: () => import("../views/border/wave.vue"),
        name: "wave",
        path: "border/wave"
      },
      {
        component: () => import("../views/border/wave-percent.vue"),
        name: "wave-percent",
        path: "border/wave-percent"
      },
      {
        component: () => import("../views/border/chargin.vue"),
        name: "chargin",
        path: "border/chargin"
      },
      {
        component: () => import("../views/border/loading.vue"),
        name: "loading",
        path: "border/loading"
      },
      {
        component: () => import("../views/border/typing.vue"),
        name: "typing",
        path: "border/typing"
      },
      {
        component: () => import("../views/border/line-animation.vue"),
        name: "line-animation",
        path: "border/line-animation"
      },
      {
        component: () => import("../views/border/line-drop-animation.vue"),
        name: "line-drop-animation",
        path: "border/line-drop-animation"
      },
      {
        component: () => import("../views/border/outline-symbol-add.vue"),
        name: "outline-symbol-add",
        path: "border/outline-symbol-add"
      },
      {
        component: () => import("../views/border/overflow-btn.vue"),
        name: "overflow-btn",
        path: "border/overflow-btn"
      },
    ]
  },

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router